<template>
  <div>
    <el-table :data="datas.data" style="width: 100%">
      <el-table-column fixed prop="username" label="用户名" width="150" />
      <el-table-column prop="content" label="文章标题" width="150" />
      <el-table-column prop="image" label="文章图片" width="180">
        <template #default="scope">
          <el-image
            style="width: 80px; height:80px border-radius:50%"
            :src="scope.row.image[0]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="video" label="文章视频" width="180">
      </el-table-column>
      <el-table-column prop="time" label="发布时间" width="150" />
      <el-table-column prop="status" label="状态" width="150">
        <template #default="scope">
          <el-tag
            :type="scope.row.status === '已通过' ? 'success' : 'error'"
            disable-transitions
            >{{ scope.row.status }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="handleaudit(scope.row)"
            >通过</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="handlealtbh(scope.row)"
            >驳回</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="handlelook(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="showmake"
      title="文章详情"
      width="60%"
      :before-close="handleClose"
    >
      <span>内容：{{ datas.onedata.content }}</span>
      <div v-for="item in datas.onedata.image" :key="item._id">
        <img :src="item"/>
      </div>
      <video :src="datas.onedata.video"></video>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showmake = false">Cancel</el-button>
          <el-button type="primary" @click="showmake = false">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from "axios";
import { ref, reactive, onMounted } from "vue";

const showmake = ref(false);
const datas = reactive({
  data: [],
  onedata: [],
});

onMounted(() => {
  getlist();
});
function getlist() {
  axios.get("http://127.0.0.1:3000/tyh/dynamiclist").then((res) => {
    datas.data = res.data.data;
  });
}

const handleaudit = (value) => {
  axios
    .post("http://127.0.0.1:3000/tyh/dynamicAlt", {
      id: value._id,
      status: "已通过",
    })
    .then((res) => {
      console.log(res.data, "5555555555555");
    });
  getlist();
};
const handlealtbh = (value) => {
  axios
    .post("http://127.0.0.1:3000/tyh/dynamicBhu", {
      id: value._id,
      status: "已驳回",
    })
    .then((res) => {
      console.log(res.data, "5555555555555");
    });
  getlist();
};
function handlelook(item) {
    console.log(item);
  showmake.value = true;
  datas.onedata = item;
}
</script>

<style lang="scss" scoped>
</style>